<html>

<head>
    <title>用户首页</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        #outer {
            margin-top: 60px;
        }

        #outer td,
        #outer th {
            border: 1px solid #ccc;
            font-family: "American Typewriter";

        }

        #outer table {
            margin: auto;
            box-shadow: 2px -2px 4px #999;
            border-collapse: collapse;
        }

        #outer td,
        #outer th {
            text-align: center;
            width: 120px;
            height: 32px;
        }

        #title {
            padding-top: 5px;
            color: white;
            text-shadow: 2px 2px 0px #000;
            font-size: 35px;
        }

        #outer table tr:hover {
            background-color: red;
        }

        #outer table tr:hover td {
            color: white;
        }

        #btn button:hover {
            background-color: red !important;
        }
    </style>
</head>

<body>
<div id="page1"></div>
    <div id="outer">
        <table>
            <thead>
                <tr>
                    <th colspan="5">
                        <h2 id="title">粉丝列表</h2>
                    </th>
                </tr>
                <tr>
                    <th><input type="checkbox" onclick="checkAll(this)"></th>
                    <th>序号</th>
                    <th>用户名</th>
                    <th>角色</th>
                </tr>
            </thead>
            <tbody id="users">

            </tbody>
        </table>
    </div>
	<div id="page2"></div>

    <script src="../../plugins/jquery/jquery-3.6.0.js"></script>

    <script>
        var currentPage=1;
            var isFirstPage=true;
            var isLastPage=false;
        $(function () {
		$("#page1").load("../common/nav.html");
        $("#page2").load("../common/footer.html");
            $.get('http://localhost:88/hayabusa/user/fansList', function (result) {
                let arr = result.object;
                //js操作dom
                let str = "";
                for (let i = 0; i < arr.length; i++) {
                    str += "<tr>";
                    str += "<td><input type='checkbox' name='checkbox' value=\"" + arr[i].id + "\"></td>";
                    str += "<td>" + (i + 1) + "</td>";
                    str += "<td>" + arr[i].userName + "</td>";
                    if (arr[i].role == 0) {
                        str += "<td>超级管理员</td>"
                    } else {
                        str += "<td>普通人员</td>"
                    }
                    str += "</tr>";
                }
                $("#users").html(str);
            })
        });
    </script>
</body>

</html>